<script setup>
import { UserOutlined, EditOutlined, BookOutlined, ClockCircleOutlined, TableOutlined } from '@ant-design/icons-vue';
import { useUserStore } from '@/store/modules/user.js'
import { ref, watchEffect, computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let current = ref(['baseInfo'])
watchEffect(() => {
  current.value[0] = route.name
},[route.name])

const userStore = useUserStore()
const role = computed(() => {
  if (userStore.userInfo.role === 1) {
    return 'author'
  } else if (userStore.userInfo.role === 2) {
    return 'admin'
  } else {
    return 'plain'
  }
})
</script>
<template>
<div class="main-container">
  <div class="main">
    <div class="menu">
      <a-menu v-model:selectedKeys="current" size="large">
        <a-menu-item key="baseInfo">
          <template #icon>
            <UserOutlined />
          </template>
          <router-link to="/user/base-info">基本信息</router-link>
        </a-menu-item>
        <a-menu-item key="bookManage" v-if="role === 'author'">
          <template #icon>
            <EditOutlined />
          </template>
          <router-link to="/user/book-manage">作品管理</router-link>
        </a-menu-item>
        <a-menu-item key="dataManage" v-if="role === 'author'">
          <template #icon>
            <TableOutlined />
          </template>
          <router-link to="/user/data-manage">数据中心</router-link>
        </a-menu-item>
        <a-menu-item key="bookShelf" v-if="role === 'author' || role === 'plain'">
          <template #icon>
            <BookOutlined />
          </template>
          <router-link to="/user/book-shelf" >我的书架</router-link>
        </a-menu-item>
        <a-menu-item key="approvalCenter" v-if="role === 'admin'">
          <template #icon>
            <ClockCircleOutlined />
          </template>
          <router-link to="/user/approval-center" >审批中心</router-link>
        </a-menu-item>
      </a-menu>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</div>
</template>

<style lang="less" scoped>
.main-container {
  background-color: #f5f5f5;
  padding-top: 40px;
  padding-bottom: 30px;
}
.main {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  height: calc(100% - 40px);

  .menu {
    font-size: 20px;
    width: 150px;
  }
  .content {
    margin-left: 60px;
    flex: 1;
    min-height: calc(100vh - 233px);
    background-color: #fff;
    padding: 30px 35px;
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 hsl(0deg 0% 93% / 50%);
    box-shadow: 0 2px 8px 0 hsl(0deg 0% 93% / 50%);
    border-radius: 4px;
  }
}
</style>